import './waves.css';
import defaultImage from '../../assets/common_images/error50.jpg'
import defaultImage2 from '../../assets/common_images/error220.jpg'

const imgErr = {};
imgErr.install = (Vue, options = {}) => {
  Vue.directive('imgerr', {
    bind(el, binding) {
      el.addEventListener('load', e => {
        const customOpts = Object.assign(options, binding.value);
        const opts = Object.assign({
            ele: el, // 作用元素
            type: 'person' // 占位图类型
          }, customOpts),
          target = opts.ele;
        if (target) {
          if (!target.src || target.src === process.env.APP_ORIGIN) {
            if (target.width < 200) { // 使用不同大小图片
              target.src = defaultImage
            } else {
              target.src = defaultImage2
            }
          }
        }
      }, false);
      el.addEventListener('error', e => {
        const customOpts = Object.assign(options, binding.value);
        const opts = Object.assign({
            ele: el, // 作用元素
            type: 'person' // 占位图类型
          }, customOpts),
          target = opts.ele;
        if (target) {
          if (!target.src || target.src === process.env.APP_ORIGIN) {
            if (target.width < 200) { // 使用不同大小图片
              target.src = defaultImage
            } else {
              target.src = defaultImage2
            }
          }
        }
      }, false);
    }
  })
};

export default imgErr;

